<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>我的收藏</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/MyVideo.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="//unpkg.com/vue@next"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
	<script src="js/jquery.params.js"></script>
	<style>
		#left{
			width: 220px;
			height: 100%;
			border-right: 1px solid white;
			color: white;
			float:left;
			overflow: auto;/*当内容超出边框时，出现滚动条*/
		}
		#right{
			height: 100%;
			float:right;
			width: 85%;
		}
		#right #center{
			width: 100%;
			height: 80%;
		}
		#sx{
			width: 200px;
			height: 800px;
			border-right: solid whitesmoke 1px;
		}
		.modal-dialog {
			position: absolute !important;
			top:50% !important;
			left:50% !important;
			transform:translate(-50%,-50%) !important;
			-webkit-transform:translate(-50%,-50%) !important;
			-moz-transform:translate(-50%,-50%) !important;
			-ms-transform:translate(-50%,-50%) !important;
			-o-transform:translate(-50%,-50%) !important;
		}
	</style>
</head>
<body>
<div id="panel">
	<!--    头部导航栏-->
	<header>
		<div  style="height: 60px; width:100%;position:fixed;z-index: 50">
			<div class="col-md-push-12 column">

				<nav class="navbar navbar-default" role="navigation">
					<div class="navbar-header">
						<a class="navbar-brand" href="main.html">首页</a>
					</div>

					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li class="active">
								<a href="main.html">番剧</a>
							</li>
							<li>
								<a href="main.html">直播</a>
							</li>
						</ul>

						<!--                    搜索框-->
						<form class="navbar-form navbar-left" role="search" >
							<div class="form-group" style="width: 500px">
								<input type="text" class="form-control" @keyup.enter="select" v-model="keyword" style="width: 495px"/>
								<input type="text" hidden="hidden">
							</div>
							<button type="button" class="btn btn-default" @click="select">查询</button>
						</form>

						<ul class="nav navbar-nav navbar-right">
							<li>
								<a v-show="loginDialog" id="modal-12089" href="#loginWin" role="button" class="btn" data-toggle="modal">
									登录
								</a>
							</li>

							<li>
								<a v-show="loginDialog" id="modal-12090" href="#EnrollWin" role="button" class="btn" data-toggle="modal">注册</a>
							</li>

							<li v-show="!loginDialog" style="padding-top: 4px">
								<a href="yhzy.html" style="padding-top: 0px">
								<img :src="person.uimage" style="width: 40px;height: 40px;border-radius: 20px">
								</a>
							</li>

							<li v-show="!loginDialog">
								<a><button style="border-style: none" @click="logout">退出登录</button></a>
							</li>
							<li>
								<a href="sc.html">收藏</a>
							</li>
							<li>
								<a href="videohistory.html" target="_blank">历史</a>
							</li>
						</ul>
					</div>

				</nav>
			</div>
		</div>
	</header>

	<div  class="modal fade" id="EnrollWin" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				</div>
				<!--                                        内容-->
				<div  class="modal-body">

					<form role="form">
						<div class="form-group">
							<label for="exampleInputEnrollEmail1">用户账号</label>
							<input v-model="user.username" type="text" class="form-control" id="exampleInputEnrollEmail1" />
						</div>
						<div class="form-group">
							<label for="exampleInputEnrollPassword1">密码</label>
							<input v-model="user.password" type="password" class="form-control" id="exampleInputEnrollPassword1" />
						</div>
						<div class="form-group">
							<label for="exampleInputEnrollPassword2">请重新输入密码</label>
							<input v-model="user.password1" type="password" class="form-control" id="exampleInputEnrollPassword2" />
						</div>
						<div class="form-group">
							<label for="exampleInputEnrollName1">用户名</label>
							<input v-model="user.uname" type="text" class="form-control" id="exampleInputEnrollName1"  />
						</div>
						<div class="form-group">
							<label for="exampleInputEnrollEmail2">邮箱</label>
							<input v-model="user.uemail" type="text" class="form-control" id="exampleInputEnrollEmail2" value="可不填" />
						</div>
						<div class="form-group">
							<label for="exampleInputEnrollPhone1">手机号</label>
							<input v-model="user.uphone" type="text" class="form-control" id="exampleInputEnrollPhone1" value="可不填" />
						</div>
					</form>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" @click="check">注册</button>
				</div>
			</div>
		</div>
	</div>

	<!--                            登录弹窗-->
	<div  class="modal fade" id="loginWin" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				</div>
				<!--                                        内容-->
				<div  class="modal-body">

					<form role="form">
						<div class="form-group">
							<label for="exampleInputEmail1">用户名</label>
							<input v-model="user.username" type="text" class="form-control" id="exampleInputEmail1" />
						</div>
						<div class="form-group">
							<label for="exampleInputPassword1">密码</label>
							<input v-model="user.password" type="password" class="form-control" id="exampleInputPassword1" />
						</div>
					</form>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-primary" style="float: left">注册</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" @click="login">登录</button>
				</div>
			</div>

		</div>

	</div>

	<hr style="margin-top: 5px;padding-top: 55px"/>
	<div id="left" >		
		<p id="sx">
			<a href="#" style="font-size: 20px;color: skyblue;text-decoration: none;margin-left: 20px;margin-top: 15px;">
			    <span class="glyphicon glyphicon-folder-open"> 默认收藏夹</span>
			</a>
		</p>
	</div>

	<div id="right" >
		<div id="center">
			<div class="" id="myNavbar" style="margin-left: 50px;">
			  <ul class="nav navbar-nav">   
			    <li><a href="#" style="font-size: 13px;">全部收藏</a></li>
			    <li><a href="#" style="font-size: 13px;">最近收藏</a></li>
			  </ul>
			  <!-- 搜索栏 -->
			  <form class="form-inline" role="form" style="padding-top: 8px;">
			  	<div class="form-group">
			  		<label class="sr-only" for="name">名称</label>
			  		<input type="text" class="form-control" id="name" placeholder="搜索" v-model="search" @keyup.enter="getCollections">
					<input type="text" hidden="hidden">
			  	</div>
			  	<button type="button" class="btn btn-default">
			  		<span class="glyphicon glyphicon-search" @click="getCollections"></span>
			  	</button>
			  </form>	  
			</div>
			<hr noshade size=1px align="left" width=90% style="margin-top: 20px;"/>
			<div>
				<span style="display: inline-block;padding-right: 15px;padding-top: 10px" v-for="(item,index) in videoCollects" :key="item.lid">
					<a :href="'view.html?vid='+item.vid" target="_blank" @click="collect(item.vid)">
						<div class="video" style="width: 180px;height: 150px;position: absolute;"></div>
							<input type="image" :src="item.vcover" width="180" height="150" style="border-radius: 10px"><br>
						<div>{{ item.vtitle }}</div>
						<div style="font-size: 5px;padding-top: 10px;height: 20px;width: 180px;display: inline-block">
						<span style="padding-right: 15px;height: 20px">
							<input type="image" src="img/img_6.png" width="20" height="20">
							{{item.vcount}}
						</span>
						<span style="padding-right: 20px;height: 20px">
							<input type="image" src="img/img_2.png" width="20" height="20" style="border-radius: 10px">
							{{item.vcollect}}
						</span>

						<span style="height: 20px">
							{{ item.vuptime }}
						</span>

					</div>
					</a>
				</span>
			</div>
		</div>
		
	</div>
</div>

<script>
	const app=Vue.createApp({
		data(){
			return{
				keyword:'',
				user:{
					username:'',
					password:''
				},
				search:'',
				person:{},
				loginDialog:true,
				videoCollects:{},
			}
		},
		created(){
			this.init()
			this.getCollections()
		},
		methods:{
			getCollections(){
				if (localStorage.getItem("person")!==null){
					axios({
						method:'post',
						url:`/videolike/getCollections`,
						params:{
							uid:this.person.uid,
							search:this.search
						}
					}).then(response=>{
						this.videoCollects=response.data.data
					})
				}else {
					layer.msg('请先登录！')
				}
			},
			init(){
				if (JSON.parse(localStorage.getItem("person"))!=null){
					this.person=JSON.parse(localStorage.getItem("person"))
					this.loginDialog=false
				}else {
					this.loginDialog=true
				}
				if (JSON.parse(localStorage.getItem("person"))!=null){
					this.person=JSON.parse(localStorage.getItem("person"))
				}else {
				}
			},
			select(){
				if (this.keyword.trim().length===0){
					layer.msg('请输入搜索内容')
				}else {
					window.location.href="ssym.html?keyword="+this.keyword
				}
			},
			login(){
				if (this.user.username.trim().length===0 || this.user.password.trim().length===0){
					layer.msg('用户名和密码不能为空')
				}else {
					axios({
						method:'post',
						url:'/users/login',
						params: {
							uid: this.user.username,
							pwd: this.user.password
						}
					}).then(response =>{
						console.log(response)
						if (response.data.code === 20041){
							this.loginDialog=false
							this.person=response.data.data
							$('#loginWin').modal('hide')
							localStorage.setItem("person",JSON.stringify(this.person))
							layer.msg('登录成功！')
							window.location.reload()
						}else {
							layer.msg('用户名或密码不正确！')
						}
					})
				}

			},
			logout(){
				localStorage.removeItem("person")
				this.loginDialog=true
				window.location.reload()
			},
			//添加历史记录
			collect(vid){
				if (localStorage.getItem("person")!==null){
					axios({
						method:'post',
						url:`/history/add`,
						params:{
							vid:vid,
							uid:this.person.uid
						}
					})
				}
			},
			enrolluser(){
				//注册users
				axios({
					type: 'put',
					url: '/users/EnrollUser',
					params: {
						uid: this.user.username,
						pwd: this.user.password,
					}
				}).then(res =>{
					layer.msg("注册成功");
				});
			},
			enrollperson(){
				axios({
					type: 'put',
					url: '/person/EnrollPerson',
					params: {
						uid: this.user.username,
						uname: this.user.uname,
						uemail: this.user.uemail,
						uphone: this.user.uphone,
					}
				}).then(res =>{

				});
			},
			check(){
				if(/^\d{9}$/.test(this.user.username)) {
					if (/^[0-9]*$/.test(this.user.username)) {
						if (this.user.password === this.user.password1) {
							this.enrolluser();
							this.enrollperson();
							$('#EnrollWin').modal('hide');
						} else {
							layer.msg("密码不一致，请重新输入")
						}
					} else {
						layer.msg("用户账号不正确,只能为数字")
					}
				}else {
					layer.msg("用户账号需九位数")
				}
			},
		}
	}).mount("#panel")
</script>
</body>
</html>